<div class="breadcrumb-area breadcrumb-bg pt-85 pb-85 mb-80">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="breadcrumb-container">
                    <ul>
                        <li><a href="/">Home</a> <span class="separator">/</span></li>
                        <li class="active">Products</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="shop-page-content mb-80">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 order-2 order-lg-1">
                <!--=======  sidebar  =======-->

                <div class="sidebar-container shop-sidebar-container">
                    <!--=======  single widget  =======-->

                    <div class="single-sidebar-widget mb-30">
                        <h3 class="sidebar-title">Categories</h3>
                        <!--=======  category dropdown  =======-->
                        <ul class="category-dropdown">
                            {volist name='gs_list' id='vo'}
                            <li {if !empty($vo['child'])} class="has-children"{/if}>
                                {if $p_cid == $vo['id']}
                                <a href="{:url('home/product/index')}?cid={$vo.id}" style="color:#abcdef">{$vo.title}</a>
                                {else}
                                <a href="{:url('home/product/index')}?cid={$vo.id}"  >{$vo.title}</a>
                                {/if}

                                {if !empty($vo['child'])}
                                <ul>
                                    {volist name="$vo['child']" id='vv'}
                                        {if $cid == $vv['id']}
                                        <li><a href="{:url('home/product/index')}?cid={$vv.id}" style="color:#abcdef">{$vv.title}</a></li>
                                        {else}
                                        <li><a href="{:url('home/product/index')}?cid={$vv.id}">{$vv.title}</a></li>
                                        {/if}

                                    {/volist}
                                </ul>
                                {/if}
                            </li>
                            {/volist}
                        </ul>
                        <!--=======  End of category dropdown  =======-->
                    </div>

                    <!--=======  End of single widget  =======-->

                    <!--=======  single widget  =======-->

                    <div class="single-sidebar-widget" style="display:none;">
                        <h3 class="sidebar-title mb-30">Filter By</h3>

                        <div class="sub-widget mb-30">
                            <h3 class="sidebar-title">Categories</h3>
                            <div class="category-container">
                                <ul>
                                    <li>
                                        <label class="checkbox-container">
                                            <a href="shop-left-sidebar.html">Living Chairs (9)</a>
                                            <input type="checkbox">
                                            <span class="checkmark"></span>
                                        </label>
                                    </li>
                                    <li>
                                        <label class="checkbox-container">
                                            <a href="shop-left-sidebar.html">Sofa (3)</a>
                                            <input type="checkbox">
                                            <span class="checkmark"></span>
                                        </label>
                                    </li>
                                    <li>
                                        <label class="checkbox-container">
                                            <a href="shop-left-sidebar.html">Storage (5)</a>
                                            <input type="checkbox">
                                            <span class="checkmark"></span>
                                        </label>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="sub-widget mb-30">
                            <h3 class="sidebar-title">Brand</h3>
                            <div class="category-container">
                                <ul>
                                    <li>
                                        <label class="checkbox-container">
                                            <a href="shop-left-sidebar.html">Graphic Corner (9)</a>
                                            <input type="checkbox">
                                            <span class="checkmark"></span>
                                        </label>
                                    </li>
                                    <li>
                                        <label class="checkbox-container">
                                            <a href="shop-left-sidebar.html">Studio Design(3)</a>
                                            <input type="checkbox">
                                            <span class="checkmark"></span>
                                        </label>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="sub-widget mb-30">
                            <h3 class="sidebar-title">Price</h3>
                            <div class="category-container mb-30">
                                <ul>
                                    <li>
                                        <label class="radio-container">
                                            <a href="shop-left-sidebar.html"> $11.00 - $12.00 (1)</a>
                                            <input type="radio" name="radio">
                                            <span class="checkmark"></span>
                                        </label>
                                    </li>
                                    <li>
                                        <label class="radio-container">
                                            <a href="shop-left-sidebar.html"> $45.00 - $48.00 (16)</a>
                                            <input type="radio" name="radio">
                                            <span class="checkmark"></span>
                                        </label>
                                    </li>
                                    <li>
                                        <label class="radio-container">
                                            <a href="shop-left-sidebar.html"> $50.00 - $66.00 (10)</a>
                                            <input type="radio" name="radio">
                                            <span class="checkmark"></span>
                                        </label>
                                    </li>
                                    <li>
                                        <label class="radio-container">
                                            <a href="shop-left-sidebar.html"> $70.00 - $80.00 (9)</a>
                                            <input type="radio" name="radio">
                                            <span class="checkmark"></span>
                                        </label>
                                    </li>
                                </ul>
                            </div>
                        </div>


                        <div class="sub-widget">
                            <h3 class="sidebar-title">Size</h3>
                            <div class="category-container">
                                <ul>
                                    <li>
                                        <label class="checkbox-container">
                                            <a href="shop-left-sidebar.html">S(9)</a>
                                            <input type="checkbox">
                                            <span class="checkmark"></span>
                                        </label>
                                    </li>
                                    <li>
                                        <label class="checkbox-container">
                                            <a href="shop-left-sidebar.html">M (3)</a>
                                            <input type="checkbox">
                                            <span class="checkmark"></span>
                                        </label>
                                    </li>
                                    <li>
                                        <label class="checkbox-container">
                                            <a href="shop-left-sidebar.html">L (13)</a>
                                            <input type="checkbox">
                                            <span class="checkmark"></span>
                                        </label>
                                    </li>
                                    <li>
                                        <label class="checkbox-container">
                                            <a href="shop-left-sidebar.html">XL (8)</a>
                                            <input type="checkbox">
                                            <span class="checkmark"></span>
                                        </label>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>

                    <!--=======  End of single widget  =======-->
                </div>

                <!--=======  End of sidebar  =======-->
            </div>
            <div class="col-lg-9 order-1 order-lg-2">
                <div class="shop-header mb-20">
                    <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-12 mb-sm-20 d-flex align-items-center">
                            <div class="view-mode-icons">
                                <a class="active" href="#" data-target="grid"><i class="fa fa-th"></i></a>
                                <a href="#" data-target="list"><i class="fa fa-list"></i></a>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12 d-flex flex-column flex-sm-row justify-content-start justify-content-md-end align-items-sm-center" style="display:none !important;">
                            <div class="sort-by-dropdown d-flex align-items-center mb-xs-10">
                                <p class="mr-10 mb-0">Sort By: </p>
                                <select name="sort-by" id="sort-by" class="nice-select">
                                    <option value="0">Sort By Popularity</option>
                                    <option value="0">Sort By Average Rating</option>
                                    <option value="0">Sort By Newness</option>
                                    <option value="0">Sort By Price: Low to High</option>
                                    <option value="0">Sort By Price: High to Low</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <!--=======  End of shop header  =======-->

                <!--=======  shop product wrap   =======-->

                <div class="shop-product-wrap grid row">
                    {volist name='list' id='vo'}
                    <div class="col-lg-4 col-md-6 col-sm-6 col-12">
                        <!--=======  grid view product  =======-->

                        <div class="ptk-product shop-grid-view-product">
                            <div class="image">
                                <a href="{:url('home/product/show')}?id={$vo.id}">
                                    <img src="{$vo.img}" class="img-fluid" alt="">
                                </a>
                                <!--=======  hover icons  =======-->
                                <a class="hover-icon" href="#"><i class="lnr lnr-heart"></i></a>
                                <a class="hover-icon" href="javacript:;" onclick="addToCart({$vo.id},1)"><i class="lnr lnr-cart"></i></a>
                            </div>
                            <div class="content">
                                <p class="product-title">
                                    <a href="{:url('home/product/show')}?id={$vo.id}">{$vo.title}</a>
                                </p>
                               <!-- <p class="product-price">
                                    <span class="main-price discounted">${$vo.cost}</span>
                                    <span class="discounted-price">${$vo.price}</span>
                                </p> -->
                            </div>
                        </div>

                        <!--=======  End of grid view product  =======-->

                        <!--=======  product list view  =======-->

                        <div class="ptk-product shop-list-view-product">
                            <div class="image">
                                <a href="{:url('home/product/show')}?id={$vo.id}">
                                    <img src="{$vo.img}" class="img-fluid" alt="">
                                </a>
                            </div>
                            <div class="content">
                                <p class="product-title"><a href="{:url('home/product/show')}?id={$vo.id}">{$vo.title}</a></p>
                                <p class="product-price">
                                    <span class="main-price discounted">${$vo.cost}</span>
                                    <span class="discounted-price">${$vo.price}</span>
                                </p>
                                <p class="product-description">{$vo.description}</p>
                                <!--=======  hover icons  =======-->
                                <div class="hover-icons">
                                    <a class="hover-icon" href="#"><i class="lnr lnr-heart"></i></a>
                                    <a class="hover-icon" href="javacript:;" onclick="addToCart({$vo.id},1)"><i class="lnr lnr-cart"></i></a>
                                </div>
                                <!--=======  End of hover icons  =======-->
                            </div>
                        </div>
                        <!--=======  End of product list view  =======-->
                    </div>
                    {/volist}
                </div>

                <!--=======  End of shop product wrap    =======-->

                <!--=======  pagination  =======-->

                <div class="pagination-container mt-50 pb-20 mb-md-80 mb-sm-80">
                    <div class="row">
                        <div class="col-lg-8 col-md-8 col-sm-12">
                            <!--=======  pagination-content  =======-->
                            <div class="pagination-content text-center text-md-right">
                                {$page|raw}
                            </div>
                            <!--=======  End of pagination-content  =======-->
                        </div>
                    </div>
                </div>

                <!--=======  End of pagination  =======-->
            </div>
        </div>
    </div>
</div>

<!--=====  End of shop page content  ======-->